<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #template {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- <slot></slot> -->
    <!-- <slot name="default" :age="18" size-type-great="18" ></slot> -->

    <!-- 1. 当成默认的插槽 -->
    <!-- <Comp>
      <h1>1</h1>
      <h2>2</h2>
    </Comp> -->

    <!-- 2. 具名插槽 -->
    <!-- <Comp>
      <template v-slot:name="{props}">1</template>
      <template v-slot:age="{props}">2</template>
    </Comp> -->

    <!-- 3. v-slot放在组件上 -->
    <!-- <Comp v-slot="{props}">
      <div></div>
    </Comp> -->

    <!-- 4. 错误的写法 -->
    <!-- <Comp v-slot="{props}">
      <template v-slot="{props}"></template>
    </Comp> -->

    <!-- 5. v-if -->
    <!-- <Comp>
      <template v-slot="xx" v-if="show"></template>
    </Comp> -->

    <!-- 6. 多条件分支的情况 -->
    <Comp>
      <template v-slot="xx" v-if="show"></template>
      <template v-slot:other="{props}" v-else-if="otherCondition"></template>
      <template v-slot:other2="{props}" v-else-if="otherCondition2"></template>
    </Comp>
    <div id="template">
      <Comp>
        <template v-slot:name="props" >{{props}}</template>
        <template v-slot:age="props" >{{props}}</template>
      </Comp>
    </div>
    <div id="app"></div>
    <script src="../../../../packages/vue/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue

      const template = document.querySelector('#template')?.innerHTML
      const App = {
        setup() {
          const value = ref(2)
          const add = () => value.value++
          return {
            value,
            add
          }
        },
        components: {
          Comp: {
            template: `<div>
                <slot name='name' n='name'/>
                <slot name='age' a="age"/>
              </div>`
          }
        },
        template
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
